<template>
    <!-- 首页顶部轮播图组件 -->
    <div class="hero">
      <el-carousel
        :height="height"
        indicator-position="outside"
        trigger="click"
        arrow="hover"
        :autoplay="autoplay"
        :interval="interval"
      >
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <div class="carousel-item">
            <!-- 使用img标签代替背景图 -->
            <img :src="item.imageUrl" alt="轮播图" class="carousel-image">
            <!-- 按钮容器 -->
            <div class="carousel-buttons">
              <div class="carousel-buttons-content">
                <div>
                  <button class="carousel-btn" v-if="item.primaryBtnText" @click="handlePrimaryBtnClick(item)">
                    {{ item.primaryBtnText }} -→
                  </button>
                  <button class="carousel-btn consult-btn" v-if="item.secondaryBtnText" @click="handleSecondaryBtnClick(item)">
                    {{ item.secondaryBtnText }} -→
                  </button>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </template>
  
  <script>
  export default {
    name: "HeroSection",
    components: {},
    props: {
      // 轮播图数据
      carouselItems: {
        type: Array,
        default: () => [
          {
            imageUrl:require("@/assets/swiper1.png") ,
            primaryBtnText: "立即创建",
            secondaryBtnText: "立即咨询"
          },
          {
            imageUrl: "@/assets/swiper2.png",
            primaryBtnText: "立即体验",
            secondaryBtnText: "立即咨询"
          }
        ]
      },
      // 轮播图高度
      height: {
        type: String,
        default: "700px"
      },
      // 是否自动播放
      autoplay: {
        type: Boolean,
        default: false
      },
      // 自动播放间隔
      interval: {
        type: Number,
        default: 5000
      }
    },
    data() {
        return {
        showConsultArea: false,
        showWechatPopup: false,
        showPhonePopup: false,
      };
    },
    methods: {
      scrollToTop() {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      },
      toggleConsultArea() {
        this.showConsultArea = !this.showConsultArea;
        // 关闭弹出框
        this.showWechatPopup = false;
        this.showPhonePopup = false;
      },
      // 处理主要按钮点击事件
      handlePrimaryBtnClick(item) {
        // 可以在这里添加按钮点击事件的处理逻辑
        // 如果需要，可以通过事件传递给父组件
        this.$emit('primary-btn-click', item);
      },
      // 处理次要按钮点击事件
      handleSecondaryBtnClick(item) {
        // 可以在这里添加按钮点击事件的处理逻辑
        // 如果需要，可以通过事件传递给父组件
        this.$emit('secondary-btn-click', item);
        // 原来的咨询相关逻辑
        this.toggleConsultArea();
      }
    },
  };
  </script>
  
  <style scoped lang="scss">
  /* 英雄区样式 */
  .hero {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  /* 轮播项基础样式 */
  .carousel-item {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  /* 轮播图片样式 */
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并覆盖整个区域 */
    object-position: center; /* 图片居中显示 */
    display: block;
  }
  
  ::v-deep .el-carousel {
    .el-carousel__indicators--outside {
      position: absolute !important;
    }
  }
  
  /* 按钮容器样式 */
  .carousel-buttons {
    position: absolute;
    bottom: 30%;
    left: 150px;
    display: flex;
    gap: 20px;
    z-index: 10;
    height: 100%;
  }
  
  .carousel-buttons-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 150px;
    padding-left: 120px;
  }
  
  /* 轮播箭头样式 */
  .el-carousel__arrow {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    font-size: 24px;
    border-radius: 50%;
    opacity: 0.7;
    transition: opacity 0.3s ease;
  }
  
  .el-carousel__arrow:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
    opacity: 1;
  }
  
  /* 隐藏滚动条 */
  .hero::-webkit-scrollbar {
    display: none;
  }
  
  .hero {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  </style>